<template>
  <div class="m-icon-svg" :style="{fontSize: size, height: size}" :src="domSrc" v-html="html"></div>
</template>

<script setup>
	import { ref, watch, onMounted } from 'vue';
	import axios from "axios";
	import {STATIC} from "@/api";

	const props = defineProps({
		src: {
			type: String,
			default: ''
		},
		size: {
			type: String,
			default: '18px'
		}
	})

	const domSrc = ref('');
	const html = ref('');
	
	watch(() => props.src, () => {
		setIconSvg();
	})

	onMounted(() => {
		setIconSvg();
	})

	// 创建axios实例
	var instance = axios.create({
		timeout: 1000
	})
	// 设置svg
	async function setIconSvg () {
		if(!props.src) {
			return;
		}
		let src = props.src;
		let dom = document.querySelector(`[src="${props.src}"]`);
		if(dom) {
			html.value = dom.innerHTML;
		} else {
			let res = await instance.get(STATIC + props.src);
			html.value = res.data;
			domSrc.value = src;
		}
	}


</script>

<style lang="less">
.m-icon-svg {
	display: inline-block;
	svg {
		display: block;
		fill:currentColor;
		width: 1em;
		height: 1em;
		path {
			fill:currentColor;
		}
	}
}
</style>